﻿@namespace Blazorise.Docs.Docs.Examples

<Row>
    <Column ColumnSize="ColumnSize.Is4.OnDesktop.Is6.OnTablet.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>Profile</CardTitle>
            </CardHeader>
            <CardBody>
                <Paragraph>
                    This column adjusts automatically based on screen size.
                </Paragraph>
                <UnorderedList>
                    <UnorderedListItem>Desktop: 4 columns</UnorderedListItem>
                    <UnorderedListItem>Tablet: 6 columns</UnorderedListItem>
                    <UnorderedListItem>Mobile: full width (12 columns)</UnorderedListItem>
                </UnorderedList>
            </CardBody>
        </Card>
    </Column>

    <Column ColumnSize="ColumnSize.Is8.OnDesktop.Is6.OnTablet.Is12.OnMobile">
        <Card>
            <CardHeader>
                <CardTitle>Details</CardTitle>
            </CardHeader>
            <CardBody>
                <Paragraph>
                    Combine multiple breakpoint sizes with a fluent builder pattern.
                    This allows you to create flexible, responsive layouts
                    without manually writing CSS grid rules.
                </Paragraph>
            </CardBody>
        </Card>
    </Column>
</Row>
